<template>
  <div class="init-container" :style="{ background: `url(${require('@/assets/background.png')})` }">
    <section class="title">
      <span>初始管理员设定</span>
    </section>
    <section class="form-container">
      <a-form :form="form" class="pass-form" ref="formTemp">
        <a-form-item label="登录账号" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'account',
              {
                rules: [
                  { required: true, message: '账号不能为空!' },
                  { validator: validAccount }
                ]
              }
            ]"
            type="text"
            placeholder="请输入登录账号"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item label="邮箱" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'email',
              {
                rules: [
                  { type: 'email', message: '邮箱格式不正确!' },
                  { required: true, message: '邮箱不能为空!' }
                ]
              }
            ]"
            type="email"
            placeholder="请输入邮箱"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
      </a-form>
    </section>
    <section class="btn">
      <a-button :loading="loading" type="primary" block @click="handleSubmit">提交</a-button>
    </section>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { user_admin } from "@/api/user";
import { RouterPath } from "@/utils/VEnum";
import formItemLayout from "@/common/FormItemLayout";
import { validAccount } from "@/common/validate";

@Component({ name: "Init" })
export default class Init extends Vue {
  private form: any = {};
  private loading: boolean = false;
  private formItemLayout: any = formItemLayout;
  private validAccount: any = validAccount;

  @Action("logout")
  private logout: any;

  created() {
    this.form = this.$form.createForm(this);
  }

  redirect() {
    const that = this;
    this.$confirm({
      title: "创建成功",
      content: "将要为您跳转到登录界面",
      icon: "smile",
      keyboard: false,
      maskClosable: false,
      onCancel() {
        that.logout();
        window.location.href = RouterPath.HOME;
      },
      onOk() {
        that.logout();
        window.location.href = RouterPath.HOME;
      }
    });
  }

  handleSubmit() {
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        this.submit(values);
      } else {
        return false;
      }
    });
  }

  async submit(form: any) {
    this.loading = true;
    try {
      const { data } = await user_admin(form);
      this.loading = false;
      if (data.errNo == 0) {
        this.redirect();
      }
    } catch (error) {
      this.loading = false;
    }
  }
}
</script>

<style lang="less" scoped>
.init-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .title {
    position: absolute;
    top: 30px;
    left: 60px;
    font-size: 20px;
    color: #666;
    font-weight: bold;
  }
  .form-container {
    width: 30%;
    height: 25%;
    box-shadow: 1px 1px 1px #999;
    border-radius: 6px;
    background-color: #fbfbfb;
    padding: 50px;
  }
  .btn {
    margin-top: 20px;
    width: 8%;
  }
}
</style>
